<template>
  <div class="sousuo">
      <div class="top">
          <div class="arrow" @click="hui">

          </div>
          <input type="text" placeholder="搜索你喜欢的宝贝">
          <div class="img">
              <img src="sou.png" />
          </div>
          <span>搜索</span>
      </div>
      <div class="jingpin">
          精品推荐

          
      </div>
      <div class="item">
              <span v-for="(v,i) in items" :key="i">{{v}}</span>
          </div>
          <div class="zuijin">
              最近搜索



          </div>
  </div>
</template>

<script>
export default {
    data(){return{
        items:["周期配送","鹿角磨牙","爱立方","冠能PRO PLAN","安贝AUSPICE","卡比CANIDAE[高性价比]","声线本能[以生鲜 逗味蕾]", "增没冒失","牛油果","ichew爱乐纯","爱旺斯[宠物健康方案提供者]","小青鲨","磨牙健齿狗零食","喵可萌","卡比CANIDAE[高性价比]"]
    }},
    methods:{
        hui(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss">
.sousuo{
    .top{
        width: 100%;
        padding:.05rem .1rem;
        height: .45rem;
        display: flex;
        .arrow{
         width: .16rem;
         height: .16rem;
         margin-top: .08rem;
         transform:rotate(-45deg);
         border-top: 1px solid #999;
         border-left: 1px solid #999;
        }
        input{
            display: block;
            width: 2.46rem;
            border: none;
            margin-top: .04rem;
            height: .3rem;
            // height: .35rem;
            padding-left: .1rem;
            background-color: #f6f6f6;
            // padding: .1rem 0 0 .1rem;
            margin-left: .1rem;
            font-size: .14rem;
        }
        .img{
           background-color: #f6f6f6;
            width: .25rem;
            height: .3rem;
             margin-top: .04rem;
            margin-right: .1rem;
            line-height: .16rem;
            padding-top:.04rem;
            img{
                width: .18rem;
                
                vertical-align: middle;
            }
        }
        span{
            height: .3rem;
            margin-top: .04rem;
            line-height:.3rem ;
            display: inline-block;
        }
    }
    .jingpin,.zuijin{
        height: .3rem;
        line-height: .3rem;
        font-size: .16rem;
            background: #fbfbfd;
        padding: .05rem 0 0 .1rem;
        margin-bottom: .1rem;
    }
    .item{
        width: 100%;
        padding: .1rem;
        background-color: #f3f3f3;
       margin-bottom: .1rem;
        span{
            display: inline-block;
            height: .25rem;
            line-height: .25rem;
            padding: .02rem;
            color: #999;
            border-radius: .1rem;
            padding-left: .1rem;
            padding-right: .1rem;
            margin: .1rem .1rem 0 0;
            font-size: .12rem;
            background-color: #fff;

        }
    }
}

</style>